<template>
	<z-paging ref="paging" v-model="list" @query="getList" loading-more-no-more-text="no-more">
		<view class="container">
			<view class="tabs">
				<view class="item" @click="active=0" :class="{active:active==0}">
					<image v-show="active==0" src="@/static/image/list-icon.png" mode=""></image> GiftCards
				</view>
				<view class="item" @click="active=1" :class="{active:active==1}">
					<image v-show="active==1" src="@/static/image/list-icon.png" mode=""></image> Withdrawals
				</view>
			</view>
			<view class="content  balance" v-if="active == 1">
				<view class="title">
					Bank balance
				</view>
				<view class="num">
					{{balance}}
				</view>
				<view class="text">
					We guarantee that always have sufficient balance
				</view>
			</view>
			<view class="list">
				<view class="col" v-for="item in list">
					<view class="item content">
						<image class="avatar" :src="item.avatar" mode=""></image>
						<view class="left">
							<view class="info">
								<view class="text">
									<view class="">
										{{item.username|filtersName}}
									</view>
									<view class="">
										{{item.content}}
									</view>
								</view>
							</view>
							<view class="text">
								<view class="">
									{{item.bank_name}}
								</view>
								<text>{{item.tradetime}}</text>
							</view>
						</view>
						<view class="right">
							<view class="text">
								{{item.total_amount}}
							</view>
							<image v-if="active==0" :src="image" mode="aspectFill" v-for="(image,index) in item.images" :key="index">
							</image>
							<view :class="item.trade_status">
								{{item.trade_status_text}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<tabbar active="3" />
		</view>
	</z-paging>
</template>

<script>
	import tabbar from "@/components/tabbar.vue"
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				active: 0,
				list: [],
				balance:uni.getStorageSync('balance'),
			}
		},
		watch: {
			active() {
				this.$refs.paging.reload()
			}
		},
		onLoad() {},
		methods: {
			getList(pageNo, pageSize) {
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				this.$post("/user/get_trade_list", {
					type: this.active == 0 ? 'giftcards' : 'withdraw',
					page: pageNo,
					row: pageSize
				}).then(res => {
					//请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
					this.$refs.paging.complete(res.data.data);
				})
			}
		},
		filters: {
			filtersName(name) {
				const start = name.slice(0, 3);
				const end = name.slice(-4);
				return start + '****' + end;
				console.log(name)
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F1F2F7;
	}

	.container {
		padding: 32rpx;
		position: relative;

		.content {
			background-color: #fff;
			border-radius: 8rpx;
		}
	}

	.tabs {
		border-radius: 50px;
		background: linear-gradient(90deg, #62D8DA, #E851D6);
		color: #fff;
		display: flex;
		padding: 10rpx;
		height: 92rpx;
		margin-bottom: 30rpx;
		font-size: 30rpx;

		.item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
		}

		.active {
			color: #0C0E27;
			background-color: #fff;
			border-radius: 50px;
		}
	}

	.balance {
		border: 2rpx solid #66D5DA;
		padding: 32rpx;
		margin: 16rpx 0;

		.title {
			font-weight: bold;
			font-size: 26rpx;
		}

		.num {
			font-weight: bold;
			font-size: 56rpx;
			margin: 10rpx 0;
		}

		.text {
			font-size: 24rpx;
		}
	}

	.list {
		.col {
			padding: 8rpx 0;

			.item {
				padding: 24rpx;
				display: flex;

				.text {
					font-size: 26rpx;

					text {
						color: #999;
						font-size: 24rpx;
					}
				}

				.avatar {
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;
				}

				.left {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: calc(100% - 300rpx);

					.info {
						display: flex;
					}
				}

				.right {
					text-align: right;
					width: 240rpx;

					image {
						width: 96rpx;
						height: 74rpx;
						margin-top: 20rpx;
						margin-left: 5rpx;
					}

					.pending {
						font-size: 24rpx;
						color: #E851D6;
					}

					.success {
						font-size: 24rpx;
						color: #62D8DA;
					}

					.failed {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
		}
	}
</style>